<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="../../assets/iconfont.js"></script>
  <link rel="stylesheet" href="../../assets/css/common.css" />
  <link rel="stylesheet" href="../../assets/element-ui/index.css" />
  <link rel="stylesheet" href="./index.min.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
    }
  </style>
  <title>网页常用颜色</title>
</head>

<body>
  <div id="app" class="plant-t-web-color">
    <el-container class="main-content">
      <el-aside width="200px" class="main-menu">
        <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="handleFunc(1)">
            <i class="el-icon-document"></i>
            <span slot="title">网页常用颜色</span>
          </el-menu-item>
          <el-menu-item index="2" @click="handleFunc(2)">
            <i class="el-icon-mobile"></i>
            <span slot="title">网页印象颜色</span>
          </el-menu-item>
          <el-menu-item index="3" @click="handleFunc(3)">
            <i class="el-icon-guide"></i>
            <span slot="title">转化RGB</span>
          </el-menu-item>
          <el-menu-item index="4" @click="handleFunc(4)">
            <i class="el-icon-medal"></i>
            <span slot="title">优秀UI色彩搭配</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="tab-content">
        <template v-if="menuIndex == 1">
          <el-container>
            <el-main>
              <div class="unit" v-for="unit,index in colorHueList" :id="'unit'+index">
                <div class="title">{{unit.name}} <i class="el-icon-caret-bottom"></i></div>
                <div class="group" v-for="group in unit.list">
                  <div class="colorpad" v-for="color in group" @click="handleColorPicked(color)">
                    <div class="color" :style="{backgroundColor:color}"></div>
                    <div class="value">{{color}}</div>
                  </div>
                </div>
              </div>
              <div style="height:100px;"></div>
            </el-main>
            <el-aside width="260px" class="bindex">
              <div class="title"><i class="el-icon-collection"></i>索引</div>
              <div class="pad" v-for="unit,index in colorHueList" @click="scrollToDiv(index)"><i
                  class="el-icon-caret-left"></i> {{ unit.name }}</div>
            </el-aside>
          </el-container>
        </template>
        <template v-if="menuIndex == 2">
          <el-container>
            <el-main>
              <div class="unit" v-for="unit,index in colorImpressionList" :id="'unit'+index">
                <div class="title">{{unit.name}} <i class="el-icon-caret-bottom"></i></div>
                <div class="group" v-for="group in unit.list">
                  <div class="colorpad" v-for="color in group" @click="handleColorPicked(color)">
                    <div class="color" :style="{backgroundColor:color}"></div>
                    <div class="value">{{color}}</div>
                  </div>
                </div>
              </div>
              <div style="height:100px;"></div>
            </el-main>
            <el-aside width="260px" class="bindex">
              <div class="title"><i class="el-icon-collection"></i>索引</div>
              <div class="pad" v-for="unit,index in colorImpressionList" @click="scrollToDiv(index)"><i
                  class="el-icon-caret-left"></i> {{ unit.name }}</div>
            </el-aside>
          </el-container>
        </template>
        <template v-if="menuIndex == 3">
          <el-form :model="transForm" ref="transForm" label-width="120px">
            <el-form-item label="16进制颜色码"
              :rules="[{required: true,message: '颜色值不能为空'},{ pattern: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, message: '不合法的16进制颜色表达式' }]"
              prop="color16">
              <el-row>
                <el-col span="18">
                  <el-input v-model="transForm.color16" placeholder="请输入16进制颜色码"></el-input>
                </el-col>
                <el-col span="6">
                  <el-button type="primary" style="margin-left:10px" @click="handleTranslate">转化</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="rgb颜色码">
              <el-row>
                <el-col span="18">
                  <el-input v-model="transForm.colorRgb" placeholder="未生成" readonly></el-input>
                </el-col>
                <el-col span="6">
                  <div v-if="transForm.colorRgb" class="colorRgb"
                    :style="{backgroundColor:transForm.colorRgb,color:transForm.reverseColor16}"
                    @click="handleColorPicked(transForm.colorRgb)"><i class="el-icon-copy-document"></i>复制</div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="16进制反色">
              <el-row>
                <el-col span="18">
                  <el-input v-model="transForm.reverseColor16" placeholder="未生成" readonly></el-input>
                </el-col>
                <el-col span="6">
                  <div v-if="transForm.reverseColor16" class="colorRgb"
                    :style="{backgroundColor:transForm.reverseColor16,color:transForm.colorRgb}"
                    @click="handleColorPicked(transForm.reverseColor16)"><i class="el-icon-copy-document"></i>复制</div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="rgb反色">
              <el-row>
                <el-col span="18">
                  <el-input v-model="transForm.reverseColorRgb" placeholder="未生成" readonly></el-input>
                </el-col>
                <el-col span="6">
                  <div v-if="transForm.reverseColorRgb" class="colorRgb"
                    :style="{backgroundColor:transForm.reverseColorRgb,color:transForm.colorRgb}"
                    @click="handleColorPicked(transForm.reverseColorRgb)"><i class="el-icon-copy-document"></i>复制</div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </template>
        <template v-if="menuIndex == 4">
          <el-row v-for="group in collocation">
            <el-col span="8" v-for="item in group">
              <el-image style="width: 98%;border:solid 1px #3d3d3d;display:block;margin:5px auto" :src="staticPath+'/img/collocation/'+item"></el-image>
            </el-col>
          </el-row>
        </template>
      </el-main>
    </el-container>
  </div>
</body>
<script src="./resources/colorlist.js"></script>
<script src="../../assets/js/vue2.js"></script>
<script src="../../assets/element-ui/index.js"></script>
<script src="../../assets/element-ui/et.js"></script>
<script>
  Vue.config.productionTip = true
  new Vue({
    el: '#app',
    data: {
      staticPath:'../../assets',
      menuIndex: 1,
      plugins: new Plugins(),
      colorHueList: [],
      colorImpressionList: [],
      transForm: {
        color16: undefined,
        colorRgb: undefined,
        reverseColor16: undefined,
        reverseColorRgb: undefined
      },
      collocation:[
        ['1.jpg','2.jpg','3.jpg'],
        ['4.jpg','5.jpg','6.jpg'],
        ['7.jpg','8.jpg','9.jpg'],
      ],
      previews:[]
    },
    created() {
      this.colorHueList = ResColorHue()
      this.colorImpressionList = ResColorImpression()
    },
    methods: {
      handleColorPicked(color) {
        window.$.sendIpc('main-pad-clipboard', { type: 'text', value: color })
        this.plugins.notifySuccess('已复制到剪贴板')
      },
      scrollToDiv(index) {
        var element = document.getElementById("unit" + index);
        element.scrollIntoView({ behavior: "smooth" });
      },
      handleFunc(index) {
        this.menuIndex = index
      },
      handleTranslate() {
        this.$refs['transForm'].validate(valid => {
          if (valid) {
            let sanitizedHex = this.transForm.color16.replace("#", "");
            // 解析红、绿、蓝各自的十六进制数
            if (sanitizedHex.length == 3) {
              sanitizedHex += sanitizedHex
            }
            let red = parseInt(sanitizedHex.substring(0, 2), 16);
            let green = parseInt(sanitizedHex.substring(2, 4), 16);
            let blue = parseInt(sanitizedHex.substring(4, 6), 16);
            this.transForm.colorRgb = `rgb(${red}, ${green}, ${blue})`;
            let redReverse = 255 - red
            let greenReverse = 255 - green
            let blueReverse = 255 - blue
            this.transForm.reverseColorRgb = `rgb(${redReverse}, ${greenReverse}, ${blueReverse})`;
            this.transForm.reverseColor16 = `#${((1 << 24) + (redReverse << 16) + (greenReverse << 8) + blueReverse).toString(16).slice(1)}`;
          }
        })
      },
      getReverseColor() {

      }
    }
  })
</script>

</html>